<template>
  <div class="page-content">
    <div class="header">
      <div class="header-left" @click="goBack">
        <span class="back-icon">←</span>
      </div>
      <div class="header-title">打卡详情</div>
      <div class="header-right" @click="showMoreOptions">
        <span class="more-icon">•••</span>
      </div>
    </div>
    
    <div class="container" v-if="loading">
      <div class="loading">加载中...</div>
    </div>
    
    <div v-else-if="!checkIn" class="container">
      <div class="empty">打卡信息不存在</div>
    </div>
    
    <div v-else class="container">
      <!-- 打卡详情 -->
      <div class="checkin-detail">
        <!-- 用户信息 -->
        <div class="user-info">
          <img :src="checkIn.user.avatar" alt="用户头像" class="avatar" />
          <div class="user-detail">
            <div class="username">{{ checkIn.user.username }}</div>
            <div class="time-location">
              <span class="time">{{ checkIn.formattedTime }}</span>
              <span v-if="checkIn.location" class="location">📍 {{ checkIn.location }}</span>
            </div>
          </div>
        </div>
        
        <!-- 打卡内容 -->
        <div class="content">
          {{ checkIn.content }}
        </div>
        
        <!-- 图片列表 -->
        <div v-if="checkIn.imageUrls.length > 0" class="image-list">
          <div v-for="(img, index) in checkIn.imageUrls" :key="index" class="detail-image-item" @click="previewImage(checkIn.imageUrls, index)">
            <img :src="img" alt="打卡图片" />
          </div>
        </div>
        
        <!-- 操作栏 -->
        <div class="action-bar">
          <div class="action-item" @click="toggleLike">
            <span class="icon" :class="{ active: checkIn.isLiked }">
              {{ checkIn.isLiked ? '❤️' : '🤍' }}
            </span>
            <span class="text">{{ checkIn.likeCount || 0 }}</span>
          </div>
          <div class="action-item">
            <span class="icon">💬</span>
            <span class="text">{{ checkIn.commentCount || 0 }}</span>
          </div>
          <div class="action-item" @click="share">
            <span class="icon">📤</span>
            <span class="text">分享</span>
          </div>
        </div>
      </div>
      
      <!-- 评论区 -->
      <div class="comment-section">
        <div class="section-title">评论 ({{ checkIn.commentCount || 0 }})</div>
        
        <!-- 评论列表 -->
        <div v-if="comments.length > 0" class="comment-list">
          <div v-for="comment in comments" :key="comment.id" class="comment-item">
            <img :src="comment.user.avatar" alt="用户头像" class="avatar-small" />
            <div class="comment-content">
              <div class="comment-header">
                <span class="comment-username">{{ comment.user.username }}</span>
                <span class="comment-time">{{ comment.formattedTime }}</span>
              </div>
              <div class="comment-text">{{ comment.content }}</div>
            </div>
          </div>
        </div>
        
        <div v-else class="no-comments">
          暂无评论，快来抢沙发吧～
        </div>
      </div>
      
      <!-- 评论输入框 -->
      <div class="comment-input-wrapper">
        <input 
          v-model="commentText" 
          type="text" 
          class="comment-input" 
          placeholder="写下你的评论..."
          @keyup.enter="submitComment"
        />
        <button class="comment-btn" @click="submitComment" :disabled="!commentText.trim()">
          发送
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { mock } from '../utils/mockData.js'

export default {
  name: 'Detail',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const checkIn = ref(null)
    const comments = ref([])
    const loading = ref(true)
    const commentText = ref('')
    
    // 获取打卡详情
    const loadCheckInDetail = async () => {
      try {
        loading.value = true
        const id = route.params.id
        
        // 使用mock数据
        const result = mock.getCheckInDetail(id)
        if (result) {
          checkIn.value = result
          comments.value = result.comments || []
        }
      } catch (error) {
        console.error('加载打卡详情失败:', error)
      } finally {
        loading.value = false
      }
    }
    
    // 返回上一页
    const goBack = () => {
      router.back()
    }
    
    // 显示更多选项
    const showMoreOptions = () => {
      alert('更多选项功能暂未实现')
    }
    
    // 切换点赞状态
    const toggleLike = () => {
      if (!checkIn.value) return
      
      try {
        const result = mock.toggleLike(checkIn.value.id)
        if (result) {
          checkIn.value.isLiked = result.isLiked
          checkIn.value.likeCount = result.likeCount
        }
      } catch (error) {
        console.error('点赞操作失败:', error)
      }
    }
    
    // 分享
    const share = () => {
      alert('分享功能暂未实现')
    }
    
    // 预览图片
    const previewImage = (images, index) => {
      console.log('预览图片:', images, index)
    }
    
    // 提交评论
    const submitComment = async () => {
      const content = commentText.value.trim()
      if (!content || !checkIn.value) return
      
      try {
        const newComment = mock.createComment(checkIn.value.id, content)
        comments.value.push(newComment)
        
        // 更新评论数
        checkIn.value.commentCount += 1
        
        // 清空输入框
        commentText.value = ''
      } catch (error) {
        console.error('提交评论失败:', error)
      }
    }
    
    // 监听路由参数变化
    watch(() => route.params.id, () => {
      loadCheckInDetail()
    })
    
    // 页面加载时获取数据
    onMounted(() => {
      loadCheckInDetail()
    })
    
    return {
      checkIn,
      comments,
      loading,
      commentText,
      goBack,
      showMoreOptions,
      toggleLike,
      share,
      previewImage,
      submitComment
    }
  }
}
</script>

<style scoped>
.checkin-detail {
  background-color: white;
  padding: 16px;
  margin-bottom: 8px;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.user-detail {
  margin-left: 12px;
  flex: 1;
}

.username {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
}

.time-location {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--text-light);
}

.location {
  margin-left: 8px;
}

.content {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 12px;
  word-break: break-word;
}

.detail-image-item {
  margin-bottom: 8px;
  border-radius: 8px;
  overflow: hidden;
}

.detail-image-item img {
  width: 100%;
  display: block;
}

.action-bar {
  display: flex;
  border-top: 1px solid #f0f0f0;
  margin-top: 12px;
  padding-top: 12px;
}

.action-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 13px;
}

.action-item .icon {
  margin-right: 4px;
  font-size: 16px;
}

.action-item .icon.active {
  color: var(--red);
}

.comment-section {
  background-color: white;
  padding: 16px;
  margin-bottom: 60px;
}

.section-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 16px;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment-item {
  display: flex;
  gap: 12px;
}

.avatar-small {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.comment-username {
  font-weight: 600;
  font-size: 13px;
}

.comment-time {
  font-size: 12px;
  color: var(--text-light);
}

.comment-text {
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}

.no-comments {
  text-align: center;
  padding: 20px;
  color: var(--text-light);
  font-size: 14px;
}

.comment-input-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 768px;
  margin: 0 auto;
  display: flex;
  padding: 12px;
  background-color: white;
  border-top: 1px solid #f0f0f0;
  gap: 12px;
  align-items: center;
}

.comment-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  font-size: 14px;
  outline: none;
}

.comment-btn {
  padding: 8px 16px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
}

.comment-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>